import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';


class Test extends React.Component {
  componentDidMount() {
    var seriesData=[];
        console.log("xData:"+this.props.xDatas);
        console.log("yData:"+this.props.charsData);
        this.props.charsData.map((item)=>{
            seriesData.push({
                name: item.name,
                type: 'line',
                data: item.value
            });
        });
    // 初始化
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: { text: '实时数据图表' },
        tooltip : {
          trigger: 'axis'
      },
      legend: {
          data:this.props.legendData
      },
      toolbox: {
          show : false,
          feature : {
            //   dataView : {show: true, readOnly: false},
            //   magicType : {show: true, type: ['line', 'bar']},
            //   restore : {show: true},
            //   saveAsImage : {
            //     show: true,
            //     type: 'jpg'
            //   }
          }
      },
        xAxis : [
          {
              type : 'category',
              data : this.props.xDatas
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
        series : seriesData
    });
}
render() {
    return (
        <div id="main" style={{ width: '100%', height: 500 }}></div>
    );
}
}

export default Test;